<template>
  <el-dialog v-model="visible" title="状态设置" width="500" align-center>
      <el-select v-model="statusId" placeholder="Select" style="width: 100%">
        <el-option
          v-for="item in statusList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancle">取消</el-button>
        <el-button type="primary" @click="confirm">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
  import {ref,reactive,inject} from "vue"
  import * as PersonnelApi from '@/api/system/personnel'
  const getList = inject('getList')

  const visible = ref(false)

  const itemId = ref(null)

  const statusId = ref(null)

  const statusList = reactive([
    { name: '离职', id: 0 },
    { name: '留职', id: 1 },
    { name: '在职', id: 2 },
  ])

  const init = (id, status) => {
    itemId.value = id
    statusId.value = status
    visible.value = true
  }

  const cancle = () => {
    visible.value = false
  }

  const confirm = () => {
    let params = {
      id: itemId.value,
      status: statusId.value
    }
    PersonnelApi.updatePersonnelStatus(params).then(res => {
      getList()
      cancle()
    }).finally(() => {
      cancle()
    })
  }
  defineExpose({
      init // 暴露方法给父组件调用
  })
</script>
<style lang="less" scoped>

</style>
